/**
  * @Description: 工程量
  * @author zhangxia
  */

<template>
    <view class="task-monitor-main">
    	<nav-bar class="header chooise" back title="工程量" @goBack="goBack">
			 <slot slot="choose">
         <span :class="{selectall:isShowDX}" class="nav-text" @click="onChangeCheckbox">选择</span>
       </slot>
		</nav-bar>
		<view class="contentwrap">
      <van-field  v-model="projectName" label="工程名称" placeholder="请选择工程名称"
                  type="textarea" autosize  rows="1" disabled
                  :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right"
                  right-icon="arrow" error-message-align="right" @click="onOpenPicker('projectName')" />
      <van-field v-model="siteName" label="站点名称" placeholder="请选择站点名称" disabled
                 :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right"
                 right-icon="arrow" error-message-align="right" @click="onOpenPicker('siteName')" />
			<view class="content">
				<view class="devicetypelist">
            <view v-for="(item,index) in netypeList" :key="index">
						<view class="titlename" :class="['item',{selectTree: isShowActive === index}]"  @click="onchangeTab(item,index)">{{item.engr_type_name}}({{item.accumulate}}/{{item.amount}})</view>
						<view v-show="isShowActive === index" class="secondlist" >
							<view v-for="(ite,index1) in item.netypeRecords" :key="index1" :class="['ite',{selectTree: ischildActive === index1}]"  @click="onchangeChildTab(ite,index1)">
								{{ite.ne_type_name}}({{ite.accumulate}}/{{ite.amount}})
							</view>
						</view>
					</view>
				</view>
				<view class="devices">
					<view class="commonbj deviceItem"
                v-for="(item,index) in taskList"
                :key="index"
                @click="chooseItem(item,index)"
                :class="['item',{chooseList: item.selected}]">
						<view class="deviceItemTitle">
							<view class="name">{{ item.NE_SN }}</view>
							<view class="statebox">
								<view class="ishide" v-if="item.IS_HIDE == 1">{{ item.IS_HIDE == 1 ? '隐':'' }}</view>
								<!-- <view class="ishide">隐</view> -->
								<view class="state">{{ item.STATUS_NAME }}</view>
							</view>
						</view>
						<view class="deviceItemLabel">
							<view class="steps">
								<view :class="item.IS_INSTALL == 1 ? {active:isActive}:''" class="stepItem" @click="jump('construction',item)">安装</view>
								<view :class="item.IS_ALONE == 1 ? {active:isActive}:''" class="stepItem" @click="jump('construction',item)">单机</view>
								<view :class="item.IS_NETWORK == 1 ? {active:isActive}:''" class="stepItem" @click="jump('construction',item)">联网</view>
								<view :class="item.STATUS_EXAM != 0 ? {active:isActive}:''" class="stepItem" @click="jump('construction-transportation')">建转运</view>
							</view>

						</view>

					</view>
				</view>
			</view>
			<footer v-if="isCheckbox === true">
				<van-button block native-type="submit" @click="goSave">提交</van-button>
			</footer>
		</view>
      <!-- 选择工程名称 -->
      <van-popup v-model="showSelectProject" position="bottom">
        <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="projectNameColumns"
                    @confirm="onConfirmProject" @cancel="showSelectProject = false" />
      </van-popup>
      <!--  选择站点名称  -->
      <van-popup v-model="showSelectSite" position="bottom">
        <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="siteNameColumns"
                    @confirm="onConfirmSite" @cancel="showSelectSite = false" />
      </van-popup>
	</view>
</template>

<script>
import navBar from "../../../../components/common/nav-bar";
import {mapGetters} from "vuex";
import {Dialog, Toast} from "vant";
export default {
    name: 'index',
    components: {navBar},
    props:{},
    data() {
        return {
          isDefault: true,
          isShowDX: false,
          imgUrl: require('../../../../static/controlImg/selectall_false.png'),
          chooseImgUrl: require('../../../../static/controlImg/selectall_true.png'),
          projectName:'',
          engineeringId:'', // 下拉工程名称 id
          siteName:'',
          siteId:'',// 下拉站点id
          showSelectProject: false,
          projectNameColumns:[],
          showSelectSite: false,
          siteNameColumns: [],
          taskList:[],// 循环整个content
          isShowActive:-1, // 控制左侧选中样式
          ischildActive:-1, // 控制左侧选中样式
          isActive: true, // 控制右侧安装样式
          netypeList:[],
          isConcealed:true,
          isSubmit:true,
          isCheckbox:false,
          pickerName:"",
		      equId:'',
          engrId:'', // 左侧传参
          selectedIds:[],//保存选中的id
		    }
    },
    created() {},
    onLoad() {
	    this.getProjectName();
    },
    computed: {
      ...mapGetters(['userData']),
      // 保存的数组去重
      uniqueSelectedIds() {
        return [...new Set(this.selectedIds)];
      }
    },
    watch: {
    },
    methods: {
      goSave() {
        let params = {
          fillDetailIds: this.selectedIds
        }
        this.$apiRequest.gcgkApi.getCommitFill(params).then(res => {
          if(res.msg == '提交成功') {
            Toast(res.msg)
            this.getNeList();
          }
        })
        console.log(this.selectedIds,'32323');
      },
      // 只允许选择状态为 待提交 的列表项
      onChangeCheckbox(){
        this.taskList.map(item => {
          item.selected = false
        })
        this.isShowDX = !this.isShowDX
        this.isCheckbox = !this.isCheckbox;
      },
      // 列表点击
      // 先判断按钮状态 切换对应列表项的selected属性的值
      // 并根据选中状态更新selectedIds数组
      // 同时 只允许选择状态为"待提交"的列表项
      chooseItem(item) {
        console.log(item)
        if(this.isCheckbox === true) {
          if (item.STATUS_NAME !== '待提交') {
            return;
          }
          item.selected = !item.selected;
          if (item.selected) {
            if (!this.selectedIds.includes(item.OBJ_ID)) {
              this.selectedIds.push(item.OBJ_ID);
            }
          } else {
            const index = this.selectedIds.indexOf(item.OBJ_ID);
            if (index > -1) {
              this.selectedIds.splice(index, 1);
            }
          }
        }
      },
      onOpenPicker(e) {
        if(e === 'projectName') {
          this.pickerName = '工程名称'
          this.isDefault = false
		      this.getProjectName();
          this.showSelectProject = true
        }else if(e === 'siteName') {
          if(this.projectName === '') {
            Dialog.alert({
              message: "请先选择工作名称",
              theme: "round-button"
            });
          }else {
            this.pickerName = '站点名称'
            this.isDefault = false
            this.getSiteName()
            this.showSelectSite = true
          }
        }
      },
      getProjectName(){
        let params = {
          userId: this.userData.USERID,
        }
        this.$apiRequest.gcgkApi.getEngListByUserId(params).then(res => {
          this.projectNameColumns = res.data.map(item => {
          if(item.SELECTDEFAULT == '1' && this.isDefault == true){
              this.projectName = item.ENG_NAME;
              this.engineeringId = item.OBJ_ID
              if(this.engineeringId !== null){
                this.getSiteName()
              }
          }
            return {
              text: item.ENG_NAME,
              value: item.OBJ_ID,
            };
          })
        })
      },
      getSiteName(){
        let params = {
          engId: this.engineeringId,
          userId: this.userData.USERID,
        }
        this.$apiRequest.gcgkApi.getEngSiteList(params).then(res => {
          this.siteNameColumns = res.data.map(item => {
          if(item.selectDefault == '1' && this.isDefault == true){
            this.siteName = item.stationName;
            this.siteId = item.stationId
            this.getNetypeMsgAndStati() //获取左侧列表数据
          }
          return {
            text: item.stationName,
            value: item.stationId,
          };
          })
        })
      },
      // 筛选工程名称
      onConfirmProject(value) {
        this.netypeList = []
        this.projectName = value.text
        this.engineeringId = value.value
		    this.siteName = ''
        this.taskList = []
        this.showSelectProject = false
      },
      // 筛选站点名称
      onConfirmSite(value) {
        this.siteName = value.text
        this.siteId = value.value
        this.showSelectSite = false
        this.getNetypeMsgAndStati()
      },
      // 获取配置总项
      getNetypeMsgAndStati() {
        let params = {
          engId:this.engineeringId,
          stationId:this.siteId
        }
        this.$apiRequest.gcgkApi.getNetypeMsgAndStati(params).then(res => {
          this.netypeList = res.data.netypeList
        })
      },
      // 左侧一级点击
      onchangeTab(item,index){
        console.log(item,'yiji')
        this.isShowActive = this.isShowActive === index ? -1 : index;
        if(item.netypeRecords == undefined) {
          this.engrId = item.engr_type
          this.getNeList()
        }
      },
      // 左侧二级点击
      onchangeChildTab(item,index) {
        console.log(item,'erji')
        this.ischildActive = this.ischildActive === index ? -1 : index;
        this.engrId = item.ne_type
		    this.getNeList()
      },
      // 获取右侧列表
      getNeList() {
        let params = {
          netypeId: this.engrId,
          engId: this.engineeringId,
          stationId:this.siteId
        }
        this.$apiRequest.gcgkApi.getNeList(params).then(res => {
          this.taskList = res.data.map(item => {
            item.selected = false
            this.selectedIds = []
            if(item.STATUS_EXAM == 2 || item.STATUS_EXAM == 3 || item.STATUS_EXAM == 9 || item.STATUS_EXAM == -1) {
              item.STATUS_NAME = '已提交'
            }
            return {...item}
          })
          console.log(this.taskList,'this.taskList')
        })
      },
      goBack() {
        uni.navigateTo({
          url: '/pages/communicationControl/index/index'
        })
      },
      jump(type,item){
        if(this.isCheckbox === true) return ;
        if(type === 'construction'){
          uni.navigateTo({
            url: `/pages/communicationControl/workbench/constructionFilling/filling?index=0&equId=${item.OBJ_ID}&neSn=${item.NE_SN}&engId=${this.engineeringId}&status=${item.STATUS_NAME}&name=${item.NE_TYPE_NAME}`
          })
        }else{
          uni.navigateTo({
            url: `/pages/communicationControl/workbench/constructionFilling/filling?index=1&equId=${item.OBJ_ID}&status=${item.STATUS_NAME}`
          })
        }

      }

	}
}
</script>

<style lang="scss" scoped>
.task-monitor-main{
	height: 100vh;
	background: #F2F6FA;
	display: flex;
	flex-direction: column;
	overflow:hidden;
  .nav-header {
    margin-right: px2vw(65);
    img {
      width: px2vw(62);
      height: px2vh(45);
      vertical-align: middle;
      margin-right: px2vw(10);
    }
    text {
      vertical-align: middle;
    }
  }
  .nav-text {
    margin-right: px2vw(30);
  }
  .selectall {
    color: #FFFC16;
  }
	/deep/.header-menu .right-btn{
		right: px2vw(28);
	}
  .imgTitle {
    font-size: px2vh(48)
  }
	.contentwrap{
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.commonbj{
			background-color: #fff;
		}
		.title{
			text-align: center;
			height: px2vh(130);
			line-height: px2vh(130);
			border-bottom: 1px solid #dbdbdb;
			flex-shrink: 0;
			box-sizing: border-box;
			box-shadow: -2px 0px 18px 2px #dbdbdb;
		}
		.content{
      // margin-top: px2vh(30);
			display: flex;
			flex: 1;
			.devicetypelist{
				width: px2vh(260);
				flex-shrink: 0;
				background-color: #ffffff;
				color: #333333;
				font-size: px2vh(36);
        .selectTree {
          background: #F2F6FA;
          color: #417ADC;

        }
				.titlename{
					height: px2vh(130);
					line-height: px2vh(130);
					border-bottom: 1px solid #dbdbdb;
					text-align: center;
				}
				.secondlist{
					text-align: center;
					line-height: px2vh(130);
					view{
						border-bottom: 1px solid #E5E5E5;
						background-color: #F2F6FA;
					}
				}
			}

			.devices{
				flex: 1;
				padding: 0 px2vh(30);
				box-sizing: border-box;
				.deviceItem{
					width: 100%;
					height: px2vh(272);
					border-radius: px2vh(20);
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					position: relative;
          margin-bottom: px2vh(30);
					.deviceItemTitle{
						height: px2vh(120);
						line-height: px2vh(120);
						font-size: px2vh(48);
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 0 px2vh(40);
						border-bottom: px2vh(2) solid #E5E5E5;
						flex-shrink: 0;
            .name {
              font-size: px2vh(34);
              width: px2vw(450);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
						.statebox{
							display: flex;
							align-items: center;
              position: absolute;
              right: px2vw(0);
							.ishide{
								background-color: rgba(65,122,220,.1);
								color: #417ADC;
								width: px2vh(80);
								height: px2vh(56);
								font-size: px2vh(36);
								border-radius: px2vh(10);
								text-align: center;
								line-height: px2vh(56);
								margin-right: px2vh(20);
                position: relative;
                right: px2vw(100);
							}
							.state{
								width: px2vw(160);
								height: px2vh(56);
								text-align: center;
								line-height: px2vh(56);
								background-color: rgba(255,112,112,.1);
								color: #FF7070;
								font-size: px2vh(36);
								border-radius: px2vh(10);
                position: relative;
                transform: rotate(45deg) scale(0.8);
                position: absolute;
                top: px2vh(-10);
                right: px2vw(-10);
							} 
						}

					}
					.deviceItemLabel{
						flex: 1;
						display: flex;
						margin: 0 px2vh(30);
						box-sizing: border-box;
						.steps{
							flex: 1;
							display: flex;
							align-items: center;
							.stepItem{
								width: px2vh(105);
								height: px2vh(68);
								flex-shrink: 0;
								line-height:px2vh(68);
								background-color: rgba(140,140,140,.1);
								color: #8C8C8C;
								font-size: px2vh(32);
								margin-right: px2vh(30);
								border-radius: px2vh(8);
								position: relative;
								text-align: center;

							}
							.stepItem:last-child{
								// width: px2vh(145);
								flex: 1.5;
							}
							.stepItem::after{
								content: "";
								width:px2vh(30);
								height: px2vh(8);
								display:inline-block;
								background-color: #ECF1FB;
								left: px2vh(105);
								position: absolute;
								top: 50%;
								margin-top: px2vh(4);
							}
							.stepItem:last-child::after{
								display: none;
							}
							.active{
								background:rgba(65,122,220,.1);
								color: #417ADC;
							}
						}

					}

				}
        .chooseList {
          border: px2vh(4) solid #417ADC;
        }
				.active{
					border:px2vh(2) solid  #417ADC;
					box-sizing: border-box;
				}

			}

		}
		footer {
			flex-shrink: 0;
			height: px2vh(180);
			background: #FFFFFF;
			border-top:px2vh(1) solid #E5E5E5;
			box-sizing:border-box;
			padding-top: px2vh(28);
			/deep/ .van-button {
				width: calc(100% - #{px2vw(60)});
				margin-left: px2vh(30);
				height: px2vh(120);
				color: #fff;
				background-color: #417ADC;
				border: 1px solid #417ADC;
				border-radius: px2vh(60);
			}
		}
	}
}
</style>
